<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.back{
width: 320px;
height: 520px;
background-color: black;
}
.write{
position: absolute;
display: inline-block;
font-size: 40px;
color:#f347ff;
top: 75px;
left: 80px;
}
.ball{
	/* //这是个圆角的方形 */
position: absolute;
background:red;
width: 45px;
height: 45px;
border-radius: 25px;
top: 200px;
left: 100px;
-webkit-transition: all linear 0.5s;/* //直接变得丝滑起来 由一个事件过渡到另一个事件的过程中 */
/* -webkit-transition: width linear 0.5s;//改变宽 其他不变 */
/* -webkit-transition: height linear 0.5s; 改变高 其他不变*/

}
.ball1{width: 40px;height: 40px;top: 180px;left: 70px;}
.ball2{width: 30px;height: 30px;top: 160px;left: 50px;}
.ball3{width: 20px;height: 20px;top: 140px;left: 40px;}
.ball4{width: 15px;height: 15px;top: 120px;left: 40px;}
.ball5{width: 10px;height: 10px;top: 100px;left: 50px;}


</style>
</head>
<body>
<div class="back">
<div class="ball"></div>
<!-- <div class='write'>紫气东来</div> 测试 -->
<div class='write'></div>


</div>

<script>
var ball=document.querySelector('.ball')

var write=document.querySelector(".write")

var id=setInterval(moveball,500);
var i=0;

function moveball(){
	if(i==5){
		clearInterval(id);
		//当小球停止移动时触发字体出现
		typing();
	}else{
		i++;
		ball.classList.add("ball"+i);
	}
}
function typing(){
	str="中 国 万 岁 ！"
	// setTimeout是一个异步处理
	for(let j=0;j<=str.length;j++){
		setTimeout(function(){
			write.innerHTML=str.slice(0,j);
		},500*j)
	}
}

</script>
</body>
</html>
